<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'saleReport.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style type="text/css">
#shelter {
	box-shadow: 0px 3px 5px #888888;
}

#shelter_one {
	box-shadow: 0px 3px 5px #888888;
}

#fixed_table #fix_head {
	background: #FFFFFF;
}

#fixed_table_one #fix_head_one {
	background: #FFFFFF;
}

#fixed_table {
	position: absolute;
	top: 0px;
	left: 0px;
	table-layout: fixed;
}

#fixed_table_one {
	position: absolute;
	top: 0px;
	left: 0px;
	table-layout: fixed;
}

.scroll_table_content {
	width: 100%;
	height: 750px;
	overflow: auto;
}

.scroll_table_content_one {
	width: 100%;
	height: 310px;
	overflow: auto;
}
</style>
<body>
	<div style="margin-top:10px;text-align: right;margin-bottom:10px;">
		<a href="/haierp1/bi/ship/selectBiShipReportByUserCreate" style="padding-left:5px;"><input type="button" value="切换到录入人报表"/></a>
	</div>
	<h4 style="text-align: left;color:red;">销售入单按月合计</h4>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script
		src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			var sourceTable = $("#top_fix_table_one"); //table id
			var sourceTableHeight = sourceTable.height();
	
			var sourceTableHead = $("#table_head_one"); //table thead tr id
			var headHeight = sourceTableHead.height(); //table thead tr height
			var sourceTableWidth = sourceTable.outerWidth(); //get source table width
			var testDiv = $("#test_width_one"); //測試獲取內容寬度
			var wrapDiv = $("#scroll_wrap_one"); //滾動條外層div，用於獲取div距離頭部的距離
			var tempTop = wrapDiv.offset().top - $(window).scrollTop(); //滾動頭部距離網頁頂部的距離
			//copy table and thead html tag from source table,
			$('body').append('<div id="shelter_one"><div id="fixed_table_wrap_one"><table id="fixed_table_one"  border="0" cellpadding="4" cellspacing="0" class="table table-hover table-bordered"><thead></thead></table></div></div>');
			var fixTopDiv = $("#shelter_one");
			fixTopDiv.hide();
			//only set top and left,beacuse i need the top bar can scroll left
			fixTopDiv.css({
				'height' : headHeight,
				'position' : 'fixed',
				'top' : tempTop + "px",
				'left' : '0',
				'width' : testDiv.width() + "px",
				'overflow' : 'hidden'
			});
			//set target table width equal source table width
			$("#fixed_table_wrap_one,#fixed_table_one").css({
				'width' : sourceTableWidth + "px"
			});
	
			//only clone tr html and change thead tr id attr
			var targetHead = sourceTableHead.clone().attr('id', 'fix_head_one');
			targetHead.appendTo('#fixed_table_one thead');
			//mark target table thead td width,height equal source table thead td width,height
			$("#table_head_one td").each(function(index, value) {
				var tempWidth = $(value).outerWidth();
				var tempHeight = $(value).outerHeight();
				$("#fixed_table_one td").eq(index).css({
					'width' : tempWidth + "px",
					'height' : tempHeight + "px"
				});
			});
	
			//Div中內容滾動
			wrapDiv.scroll(function() {
				//scroll left method
				var sl = -Math.max(wrapDiv.scrollLeft(), $('document').scrollLeft());
				if (isNaN(sl)) {
					sl = -wrapDiv.scrollLeft();
				}
				fixTopDiv.css("left", sl + 'px');
				var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
				tempTop = wrapDiv.offset().top - $(window).scrollTop();
				if (tempTop <= 0) {
					tempTop = 0;
				}
				var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
				//control  show or hide
				if (scroll_top >= 0) {
					fixTopDiv.css({
						'top' : tempTop + "px",
						'width' : baseWidth + "px"
					});
					if (!fixTopDiv.is(':visible')) {
						fixTopDiv.show();
					}
				} else {
					if (fixTopDiv.is(':visible')) {
						fixTopDiv.hide();
					}
	
				}
			});
	
			//瀏覽器srcoll
			$(window).on('scroll', function() {
				tempTop = wrapDiv.offset().top - $(window).scrollTop();
				var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
				var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
				if (tempTop <= 0) {
					tempTop = 0;
				}
				console.log(scroll_top);
				fixTopDiv.css({
					'top' : tempTop + "px",
					'width' : baseWidth + "px"
				});
				//control  show or hide
				if (scroll_top >= 0) {
					if (!fixTopDiv.is(':visible')) {
						fixTopDiv.show();
					}
				} else {
					if (fixTopDiv.is(':visible')) {
						fixTopDiv.hide();
					}
				}
			});
	
		});
	</script>
	<div class="scroll_table_content_one" id="scroll_wrap_one">
		<table id="top_fix_table_one" border="1" cellpadding="4" cellspacing="0" class="table table-hover table-bordered">
			<thead>
				<tr id="table_head_one" class="info">
					<td class="text-center">时间</td>
					<td class="text-center">总子订单数</td>
					<td class="text-center">winnie</td>
					<td class="text-center">winnie2</td>
					<td class="text-center">winnie3(李鑫)</td>
					<td class="text-center">winnie4</td>
					<td class="text-center">winnie5</td>
					<td class="text-center">winnie6</td>
					<td class="text-center">winnie8</td>
					<td class="text-center">有赞</td>
					<td class="text-center">微信小程序(非代理)</td>
					<td class="text-center">竣宝妈咪 彭碧涵</td>
					<td class="text-center">彭碧君 brenda</td>
					<td class="text-center">可乐妈</td>
					<td class="text-center">小姿姿</td>
					<td class="text-center">Nz</td>
					<td class="text-center">papa</td>
					<td class="text-center">ella</td>
					<td class="text-center">大胃王</td>
					<td class="text-center">其他代理</td>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${shipSalesNameMouthList}" var="ship">
				<tr>
					<td style="text-align:center">${ship.dimensionDate}</td>
					<td style="text-align:center">${ship.erpOrderNum}</td>
					<td style="text-align:center">${ship.winnieNumber}</td>
					<td style="text-align:center">${ship.winnie2Number}</td>
				    <td style="text-align:center">${ship.winnie3Number}</td>
				    <td style="text-align:center">${ship.winnie4Number}</td>
				    <td style="text-align:center">${ship.winnie5Number}</td>
				    <td style="text-align:center">${ship.winnie6Number}</td>
					<td style="text-align:center">${ship.winnie8Number}</td>
				    <td style="text-align:center">${ship.youzanNumber}</td>
					<td style="text-align:center">${ship.xcxOwnNumber}</td>
					<td style="text-align:center">${ship.junbaoNumber}</td>
					<td style="text-align:center">${ship.pbNumber}</td>
				    <td style="text-align:center">${ship.keleNumber}</td>
					<td style="text-align:center">${ship.zzNumber}</td>
					<td style="text-align:center">${ship.nzNumber}</td>
					<td style="text-align:center">${ship.ppNumber}</td>
					<td style="text-align:center">${ship.ellmaNumber}</td>
					<td style="text-align:center">${ship.daweiNumber}</td>
					<td style="text-align:center">${ship.otherAgentSkuNumber}</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		<div id="test_width_one"></div>
	</div>
	<h4 style="text-align: left;color:red;">销售入单按天</h4>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			var sourceTable = $("#top_fix_table"); //table id
			var sourceTableHeight = sourceTable.height();
	
			var sourceTableHead = $("#table_head"); //table thead tr id
			var headHeight = sourceTableHead.height(); //table thead tr height
			var sourceTableWidth = sourceTable.outerWidth(); //get source table width
			var testDiv = $("#test_width"); //測試獲取內容寬度
			var wrapDiv = $("#scroll_wrap"); //滾動條外層div，用於獲取div距離頭部的距離
			var tempTop = wrapDiv.offset().top - $(window).scrollTop(); //滾動頭部距離網頁頂部的距離
			//copy table and thead html tag from source table,
			$('body').append('<div id="shelter"><div id="fixed_table_wrap"><table id="fixed_table"  border="0" cellpadding="4" cellspacing="0" class="table table-hover table-bordered"><thead></thead></table></div></div>');
			var fixTopDiv = $("#shelter");
			fixTopDiv.hide();
			//only set top and left,beacuse i need the top bar can scroll left
			fixTopDiv.css({
				'height' : headHeight,
				'position' : 'fixed',
				'top' : tempTop + "px",
				'left' : '0',
				'width' : testDiv.width() + "px",
				'overflow' : 'hidden'
			});
			//set target table width equal source table width
			$("#fixed_table_wrap,#fixed_table").css({
				'width' : sourceTableWidth + "px"
			});
	
			//only clone tr html and change thead tr id attr
			var targetHead = sourceTableHead.clone().attr('id', 'fix_head');
			targetHead.appendTo('#fixed_table thead');
			//mark target table thead td width,height equal source table thead td width,height
			$("#table_head td").each(function(index, value) {
				var tempWidth = $(value).outerWidth();
				var tempHeight = $(value).outerHeight();
				$("#fixed_table td").eq(index).css({
					'width' : tempWidth + "px",
					'height' : tempHeight + "px"
				});
			});
	
			//Div中內容滾動
			wrapDiv.scroll(function() {
				//scroll left method
				var sl = -Math.max(wrapDiv.scrollLeft(), $('document').scrollLeft());
				if (isNaN(sl)) {
					sl = -wrapDiv.scrollLeft();
				}
				fixTopDiv.css("left", sl + 'px');
				var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
				tempTop = wrapDiv.offset().top - $(window).scrollTop();
				if (tempTop <= 0) {
					tempTop = 0;
				}
				var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
				//control  show or hide
				if (scroll_top >= 0) {
					fixTopDiv.css({
						'top' : tempTop + "px",
						'width' : baseWidth + "px"
					});
					if (!fixTopDiv.is(':visible')) {
						fixTopDiv.show();
					}
				} else {
					if (fixTopDiv.is(':visible')) {
						fixTopDiv.hide();
					}
	
				}
			});
	
			//瀏覽器srcoll
			$(window).on('scroll', function() {
				tempTop = wrapDiv.offset().top - $(window).scrollTop();
				var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
				var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
				if (tempTop <= 0) {
					tempTop = 0;
				}
				console.log(scroll_top);
				fixTopDiv.css({
					'top' : tempTop + "px",
					'width' : baseWidth + "px"
				});
				//control  show or hide
				if (scroll_top >= 0) {
					if (!fixTopDiv.is(':visible')) {
						fixTopDiv.show();
					}
				} else {
					if (fixTopDiv.is(':visible')) {
						fixTopDiv.hide();
					}
				}
			});
	
		});
	</script>
	<div class="scroll_table_content" id="scroll_wrap">
		<table id="top_fix_table" border="1" cellpadding="4" cellspacing="0"
			class="table table-hover table-bordered">
			<thead>
				<tr id="table_head" class="info">
					<td class="text-center">时间</td>
					<td class="text-center">总子订单数(sku件数)</td>
					<td class="text-center">winnie</td>
					<td class="text-center">winnie2</td>
					<td class="text-center">winnie3(李鑫)</td>
					<td class="text-center">winnie4</td>
					<td class="text-center">winnie5</td>
					<td class="text-center">winnie6</td>
					<td class="text-center">winnie8</td>
					<td class="text-center">有赞</td>
					<td class="text-center">微信小程序(非代理)</td>
					<td class="text-center">竣宝妈咪 彭碧涵</td>
					<td class="text-center">彭碧君 brenda</td>
					<td class="text-center">可乐妈</td>
					<td class="text-center">小姿姿</td>
					<td class="text-center">Nz</td>
					<td class="text-center">papa</td>
					<td class="text-center">ella</td>
					<td class="text-center">大胃王</td>
					<td class="text-center">其他代理</td>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${shipSalesNameList}" var="ship">
					<tr>
						<td style="text-align:center">${ship.dimensionDate}</td>
						<c:choose>
							<c:when test="${ ship.erpOrderNum > 0}">
								<td style="text-align:center">${ship.erpOrderNum}(${ship.erpOrderSkuNum})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.erpOrderNum}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnieNumber > 0}">
								<td style="text-align:center">${ship.winnieNumber}(${ship.winnieSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnieNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie2Number > 0}">
								<td style="text-align:center">${ship.winnie2Number}(${ship.winnie2SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie2Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie3Number > 0}">
								<td style="text-align:center">${ship.winnie3Number}(${ship.winnie3SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie3Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie4Number > 0}">
								<td style="text-align:center">${ship.winnie4Number}(${ship.winnie4SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie4Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie5Number > 0}">
								<td style="text-align:center">${ship.winnie5Number}(${ship.winnie5SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie5Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie6Number > 0}">
								<td style="text-align:center">${ship.winnie6Number}(${ship.winnie6SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie6Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.winnie8Number > 0}">
								<td style="text-align:center">${ship.winnie8Number}(${ship.winnie8SkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.winnie8Number}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.youzanNumber > 0}">
								<td style="text-align:center">${ship.youzanNumber}(${ship.youzanSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.youzanNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.xcxOwnNumber > 0}">
								<td style="text-align:center">${ship.xcxOwnNumber}(${ship.xcxOwnSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.xcxOwnNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.junbaoNumber > 0}">
								<td style="text-align:center">${ship.junbaoNumber}(${ship.junbaoSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.junbaoNumber}</td>
							</c:otherwise>
						</c:choose>
					    <c:choose>
							<c:when test="${ ship.pbNumber > 0}">
								<td style="text-align:center">${ship.pbNumber}(${ship.pbSkuNumber})</td>

							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.pbNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.keleNumber > 0}">
								<td style="text-align:center">${ship.keleNumber}(${ship.keleSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.keleNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.zzNumber > 0}">
								<td style="text-align:center">${ship.zzNumber}(${ship.zzSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.zzNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.nzNumber > 0}">
								<td style="text-align:center">${ship.nzNumber}(${ship.nzSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.nzNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.ppNumber > 0}">
								<td style="text-align:center">${ship.ppNumber}(${ship.ppSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.ppNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.ellmaNumber > 0}">
								<td style="text-align:center">${ship.ellmaNumber}(${ship.ellmaSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.ellmaNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.daweiNumber > 0}">
								<td style="text-align:center">${ship.daweiNumber}(${ship.daweiSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.daweiNumber}</td>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${ ship.otherAgentSkuNumber > 0}">
								<td style="text-align:center">${ship.otherAgentNumber}(${ship.otherAgentSkuNumber})</td>
							</c:when>
							<c:otherwise>
								<td style="text-align:center;color:red">${ship.otherAgentSkuNumber}</td>
							</c:otherwise>
						</c:choose>
					</tr>
				</c:forEach>
			</tbody>
		</table>

		<div id="test_width"></div>
		<!--Test width div, @link http://stackoverflow.com/a/10692895 -->
	</div>
	<!--/content scroll wrapper-->
</body>
</html>
